<template>
    <div>
        <div>
            <table border="1" cellspacing='1'>
                <tr>
                    <th>序号</th>
                    <th>商品名称</th>
                    <th>商品价格</th>
                    <th>购买数量</th>
                    <th>操作</th>
                </tr>
                <tr v-for="(i, index) in glist">
                    <td>{{ i.id }}</td>
                    <td>{{ i.name }}</td>
                    <td>{{ i.price }}</td>
                    <td>
                        <button @click="cut(index)">-</button>
                        {{ i.num }}
                        <button @click="add(index)">+</button>
                    </td>
                    <td>
                        <button v-on:click="del(index)">移除</button>
                    </td>
                </tr>
            </table>
            总价：{{ total }}

        </div>
        
        {{ 0 | myfilter }}
        
        <button @click="counter++">点</button>

        {{ counter }}

        {{ reverse_msg }}

        <ul>
            <li v-for='(item,index) in tlist' :class="{on:index%2==0,off:index%2!=0}">

              {{ index }}  {{ item.text }}

            </li>
        </ul>

        {{ msg }}

        <div v-html="msg"></div>

        <h1 v-show="ok">显示</h1>

        <div v-if="type === 'A'">
            A
        </div>
        <div v-else-if="type === 'B'">
            B
        </div>
        <div v-else>
            C
        </div>

    </div>
</template>

<script>
export default {
    // 数据定义
    data(){
        return{
            msg: '你好，这是一个变量',
            ok: true,
            type: 'A',
            tlist: [{text:'水果'},{text:'蔬菜'},{text:'生鲜'}],
            counter: 0,
            glist: [
                {id:'1',name:'iphone8',price:'5099',num:3},
                {id:'2',name:'iphone xs',price:'8699',num:1},
                {id:'3',name:'iphone xr',price:'6499',num:1}
            ]
        }
    },

    // 过滤器
    filters:{
        myfilter: function(value){
            if(value==1){
                return '已支付';
            }else{
                return '未支付';
            }
        }
    },

    // 监听属性
    watch:{
        counter: function(nval, oval){
            console.log('计数器的变化'+oval+'变成了'+nval);
        }
    },

    // 计算属性
    computed:{
        reverse_msg: function(){
            return this.msg.split('').reverse().join('')
        },

        // 总价
        total(){
        var total=0;
        for(let i = 0; i<this.glist.length;i++){
          total+=this.glist[i].price*this.glist[i].num
        }
        return '$'+total
      }
    },
    

    // 初始化方法/钩子方法
    mounted:function(){

    },
    // 常用方法/自定义方法
    methods: {
        cut(index) {
            if (this.glist[index].num > 0)
            this.glist[index].num--;
        },
        add(index) {
            this.glist[index].num++;
        },
        del(index) {
            this.glist.splice(index, 1)
      }
    },
}
</script>

<style>
.on{background: blue;}
.off{background: chartreuse;}
</style>